<template>
    <div>
      <div>{{ parentValue }}</div>
      <!-- xin -->
      <div>{{propC}}</div>
      <!-- 方法一：直接调用@Emit -->
      <button @click="handleAdd1" v-if="typeParent == 1">点我向父组件传值</button>
      <!-- 方法二：直接调用@Emit -->
      <button @click="handleAdd2" v-if="typeParent == 2">点我向父组件传值</button>
      <!-- 方法三：间接调用@Emit -->
      <button @click="handleClickEvent" v-if="typeParent == 3">点我向父组件传值</button>
      <!-- 方法四： -->
      <button @click="test2" v-if="typeParent == 4">方法四</button>
    </div>
</template>
<script lang="ts">
// import { number } from 'echarts'
import { Options, Vue } from 'vue-class-component'
import { Prop, Emit, PropSync } from 'vue-property-decorator'

interface ITest {
  param1: string;
  param2: number;
  say: (age: number) => string;
}
@Options({})
export default class Child extends Vue {
  @Prop(String) // 括号里为父组件传过来的值的类型
  private parentValue = ''; // 父组件传过来的值用parentValue接收，默认为空

  // 父传子方法二
  @Prop([String, Number]) readonly propC: string|number|undefined

  // 可以视为在传入 prop 时使用了 .sync
  @PropSync('typeParent', { type: [String, Number] }) syncedTypeParent!: string|number|undefined
  // 等价于
  /* export default {
    props: {
      typeParent: {
        type: [String, Number]
      }
    },
    computed: {
      syncedTypeParent: {
        get() {
          return this.typeParent
        },
        set(value) {
          this.$emit('update:typeParent', value)
        }
      }
    }
  } */

  private toParent = '要传递给父组件的值：1';
  private toParent2 = '要传递给父组件的值:2';
  private toParent3 = '要传递给父组件的值:3';
  // 方法一
  @Emit()
  handleAdd1 (): string {
    return this.toParent // return 将要传递的值
  }

  // 方法二
  // 这时父组件接收值时是用@Emit('test')中的test接收的
  @Emit('test')
  handleAdd2 (): string {
    console.log(this.toParent2)
    return this.toParent2
  }

  // 方法三
  // 先定义父组件接收的方法
  @Emit()
  handleAdd3 (): string {
    return this.toParent3 // return将要传递的值
  }

  handleClickEvent (): void {
    // ...一些其他的操作
    // 然后手动调用传值
    this.handleAdd3()
  }

  // 子组件向父组件传递多个值，建议把这个值封装成一个对象，然后一起传递
  // eg: (子组件)
  @Emit()
  test2 (): ITest {
    // 要传给父组件的多个值
    const params = {
      param1: 'hello',
      param2: 120,
      say (age: number): string {
        return `${age}+is good`
      }
    }
    return params
  }
}
</script>
